<template>
  <div>
    <h5 class="text-muted">当前任务：项目推荐</h5>
    <el-form class="query-table-form" :inline="true">
      <el-form-item>
        <select-address
          v-model="params.address_code"
          clearable
          auto-top
          placeholder="所属地"
          @change="getData()"
        ></select-address>
      </el-form-item>

      <el-form-item>
        <el-input
          v-model="params.customer_name"
          @keyup.enter.native="getData()"
          :clearable="true"
          placeholder="主体名称查询"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-input
          v-model="params.lender_idcard"
          :clearable="true"
          placeholder="身份证号码"
          @keyup.enter.native="getData()"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>
    <c-table
      border
      class="table-sm"
      v-loading="loading"
      :stripe="false"
      :columns="tableColumns"
      :data="tableData"
    >
      <template v-slot:status="scope">
        <div v-if="+scope.row.recommend_status === 2">
          {{ scope.row.recommend_opinion || '-' }}
        </div>
        <div
          v-else
          class="status-label"
          :class="`badge-${enumRecommendClassStatus[scope.row.recommend_status].css}`"
        >
          {{ enumRecommendClassStatus[scope.row.recommend_status].label }}
        </div>
      </template>
      <template v-slot:year="scope">
        <div v-if="+scope.row.recommend_status === 2">
          {{ scope.row.archive_complete_time || '-' }}
        </div>
        <div v-else>
          {{ scope.row.load_years || '-' }}
        </div>
      </template>
    </c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <el-dialog
      :visible.sync="reportVisible"
      :close-on-click-modal="false"
      :before-close="handleCreditClose"
      top="30px"
      width="80%"
    >
      <credit-file :query-id="queryId"></credit-file>
    </el-dialog>

    <recommend-file
      :visible.sync="recommendVisible"
      :related-data="relatedData"
      @success="RegetData"
    ></recommend-file>
    <el-dialog
      :visible.sync="rejectVisible"
      :close-on-click-modal="false"
      title="拒绝理由"
      top="10%"
      width="600px"
    >
      <div class="card text-indent">
        <div>拒绝单位：{{ rejectData.submit_person_name }}</div>
        <div>拒绝理由：{{ rejectData.recommend_opinion }}</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import SelectAddress from '@/components/select/SelectAddress'
// import CreditFile from '@/credit/components/creditFile/Index'
import RecommendFile from '@/gov/views/business/RecommendFile'
import { enumProjectType, enumRecommendClassStatus } from '@/gov/plugins/enum'
import creditFile from '@/gov/components/creditFile/GovCredit'
export default {
  components: {
    SelectAddress,
    // CreditFile,
    creditFile,
    RecommendFile,
  },
  props: {},
  data() {
    return {
      enumRecommendClassStatus,
      tableName: 'customer_related',
      tableId: '',
      params: {
        index: 1,
        size: 15,
        'project_status.eq': 1,
        customer_name: '',
        lender_idcard: '',
        address_code: '',
      },
      loading: false,

      tableData: [],
      tableCount: 0,
      tableColumns: [
        {
          attrs: { label: '项目名称', prop: 'customer_name', minWidth: '160px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        { attrs: { label: '地址', prop: 'address', minWidth: '160px' } },
        {
          attrs: { label: '项目类型', prop: 'project_type', align: 'center' },
          process: v => enumProjectType[v],
        },
        { attrs: { label: '负责人', prop: 'corp_name' } },
        { attrs: { label: '联系电话', prop: 'mobile_no' } },
        { attrs: { label: '申请金额', prop: 'apply_funds', align: 'center' } },
        { attrs: { label: '申请年限', align: 'center' }, slot: 'year' },
        { attrs: { label: '推荐时间', prop: 'recommend_time' } },
        { attrs: { label: '项目状态', align: 'center' }, slot: 'status' },
        {
          attrs: { label: '操作', align: 'center', minWidth: '100px' },
          operations: [
            {
              content: '拒绝详情',
              icon: 'fa fa-search',
              event: this.handleReject,
              ifRender: row => +row.recommend_status === 2,
            },
            {
              content: '推荐',
              icon: 'fa fa-edit',
              event: this.handleRecommend,
              ifRender: row => +this.isUserTown === 4 && +row.recommend_status === 0,
            },
            {
              content: '打印',
              icon: 'el-icon-printer',
              event: this.handlePrint,
              ifRender: row => +row.recommend_status === 1,
            },
            { content: '档案卡', icon: 'fa fa-file', event: this.handleView },
          ],
        },
      ],

      // 信用档案
      reportVisible: false,
      queryId: '',
      submit_type: '',
      // 推荐
      recommendVisible: false,
      relatedData: {},

      rejectData: {},
      rejectVisible: false,
    }
  },
  computed: {
    ...mapGetters(['org', 'user']),
    isUserTown() {
      return this.user.orgRegionLever
    },
  },
  watch: {
    $route(route, oldroute) {
      if (route.name === 'missionRecomment') {
        if (oldroute.name === 'missionRecomment') {
          this.params.index = 1
          this.params.size = 15
        }
        this.getData()
      }
    },
  },
  created() {
    this.params.address_code = this.$utils.getAddressCode()
    let orgClass = this.org.orgClass
    this.params['submit_type.eq'] = orgClass === 'org_gov_ny' ? '1' : '4'
    this.getData()
  },
  mounted() {},
  methods: {
    RegetData() {
      this.$store.dispatch('getTaskCountGov')
      this.getData()
    },
    async getData(index = 1) {
      this.params.index = index
      const params = { ...this.params }
      const order = { recommend_time: 'desc' }
      const status = this.$route.query.status
      if (status !== undefined) {
        params['recommend_status.eq'] = status
      }
      if (+status === 2) {
        this.$set(this.tableColumns[8].attrs, 'label', '拒绝理由')
        this.$set(this.tableColumns[7].attrs, 'label', '拒绝时间')
        this.$set(this.tableColumns[6].attrs, 'label', '档案卡完成时间')
      } else {
        this.$set(this.tableColumns[8].attrs, 'label', '项目状态')
        this.$set(this.tableColumns[7].attrs, 'label', '推荐时间')
        this.$set(this.tableColumns[6].attrs, 'label', '申请年限')
      }

      this.loading = true

      const [res] = await this.$utils.promise(
        this.$api.getData(this.$serviceName, this.tableName, params, order)
      )
      this.loading = false

      const data = (res && res.data) || {}
      this.tableData = data.data || []
      this.tableCount = data.totalCount || 0
    },
    handleView(row) {
      this.queryId = row.customer_related_id
      this.reportVisible = true
    },
    handleReject(row) {
      this.rejectData = { ...row }
      this.rejectVisible = true
    },
    handleRecommend(row) {
      if (+this.isUserTown !== 4) {
        return this.$message.warning('只有乡政府才能直接推荐！')
      }
      // if ([-1, 0, 2].includes(+row.project_status)) {
      //   return this.$message.warning('完成数字信用档案卡才能推荐！')
      // }
      this.relatedData = row
      this.recommendVisible = true
    },
    handlePrint(row) {
      this.relatedData = row
      this.recommendVisible = true
    },
    handleCreditClose() {
      this.reportVisible = false
      this.getData(this.params.index)
    },
  },
}
</script>

<style lang="scss" scoped>
.status-label {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  vertical-align: baseline;
  border-radius: 0.25rem;
  transition: color 0.15s;
}
.text-indent {
  font-size: 1.2rem;
  text-indent: 2.4rem;
  min-height: 150px;
  padding: 10px;
}
</style>
